<template>
	<view class="details">
		<view class="details-a" style="height: 878rpx;">
			<view class="location">
			<view class="jump">
				<view class="house">
					<view class="house-a" @click="navigate"><van-icon name="arrow-left" size="20" /></view>
					<view class="middle"></view>
					<view class="house-b" @click="goHome"><van-icon name="wap-home" size="20" /></view>
				</view>

				<view class="search"><van-icon name="search" size="26" /></view>
			</view>
			<view class="details-video">
				<view class="">
					<!-- 视频 -->
					<view class="video">
						<video
							autoplay
							src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
						></video>
					</view>
					<!-- 简介 -->
					<view class="introduce">
						<view class="introduce-js">简介</view>
						<view class="frame"></view>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view class="hot">
							<view class="hot-a">
								<van-icon name="fire" />
								热门
							</view>
							<view class="title-a van-ellipsis">{{ detailsList.title }}</view>
						</view>
					</view>
					<view class="info">
						<view class="left">
							<image :src="detailsList.img" mode=""></image>
							<view>{{ detailsList.name }}</view>
						</view>
						<view class="right">
							<view>{{ detailsList.playback }}观看</view>
							<view>{{ detailsList.barrage }}弹幕</view>
						</view>
					</view>
					<view class="collect">
						<view class="collect-item" :class="isIcon ? 'active' : ''">
							<van-icon @click="spotFabulous" name="star" size="20" />
							<view>{{ detailsList.collection }}</view>
						</view>
						<view class="collect-item">
							<van-icon name="photo-fail" size="20" />
							<view>分享海报</view>
						</view>
						<view class="collect-item">
							<van-icon name="wechat" size="20" />
							<view>分享好友</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		

		<view class="recommend">
			<view class="recommend-list">
				<view class="item" @click="goDetails(item.uid)" v-for="item in list" :key="item.uid">
					<view class="image">
						<image :src="item.img" mode=""></image>
						<view class="image-list">
							<view class="left">
								<view class="left-a">
									<van-icon name="play-circle-o" />
									{{ item.playback }}
								</view>
								<view class="left-b">
									<van-icon name="orders-o" />
									{{ item.barrage }}
								</view>
							</view>

							<view class="right">{{ item.VideoLength }}</view>
						</view>
					</view>
					<view class="title van-multi-ellipsis--l2">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { GetHistory } from '@/api/modules/history.js'
import { viodoSupportApi, viodoNotApi, cateChannelApi } from '@/api/modules/home.js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	detailsList: {},
	isIcon: false,
	list: [],
	uid: ''
})

// 点赞
const spotFabulous = async e => {
	state.isIcon = !state.isIcon
	const isState = state.isIcon ? 1 : -1
	const res = await viodoSupportApi({ nameid: state.detailsList.id, n: isState, uid: 2 })
}

const goDetails = id => {
	state.uid = id
	getSell()
}

// 跳转上一个页面
const navigate = id => {
	uni.navigateBack()
}

// 获取收藏状态
const viodoNot = async () => {
	const { message } = await viodoNotApi({ nameid: state.detailsList.id, uid: 2 })
	state.isIcon = message
}

// 推荐列表
const getSell = async () => {
	// 视频详情
	console.log(state.uid)
	const res = await GetHistory(state.uid)
	res.message[0].playback = res.message[0].playback / 10000 >= 1 ? Math.round(res.message[0].playback / 10000) + '万' : res.message[0].playback
	res.message[0].barrage = res.message[0].barrage / 10000 >= 1 ? Math.round(res.message[0].barrage / 10000) + '万' : res.message[0].barrage
	res.message[0].collection = res.message[0].collection / 10000 >= 1 ? Math.round(res.message[0].collection / 10000) + '万' : res.message[0].collection
	state.detailsList = res.message[0]

	//	视频列表
	const { data } = await cateChannelApi(state.detailsList.id)
	data.map(item => {
		item.playback = item.playback / 10000 >= 1 ? Math.round(item.playback / 10000) + '万' : item.playback
		item.barrage = item.barrage / 10000 >= 1 ? Math.round(item.barrage / 10000) + '万' : item.barrage
		let m = Math.floor(item.VideoLength / 60)
		let ss = item.VideoLength % 60
		m += ''
		ss += ''
		m = m.length == 1 ? '0' + m : m
		ss = ss.length == 1 ? '0' + ss : ss
		item.VideoLength = m + ':' + ss
	})
	state.list = data
}

// 跳转home页面
const goHome = () => {
	uni.switchTab({
		url: '/pages/home/home'
	})
}
// 页面加载
onLoad(async message => {
	state.uid = message.uid
	// console.log(message);
	getSell()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { detailsList, isIcon, list, uid } = toRefs(state)
</script>

<style lang="scss">
.details {
	.location{
		width: 100%;
		position: absolute;
		z-index: 99;
		background-color: #fff;
	}
	.jump {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.house {
			width: 160rpx;
			height: 90rpx;
			border-radius: 50rpx;
			margin: 30rpx 0;
			border: 1rpx solid #ccc;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.middle {
				width: 2rpx;
				height: 40rpx;
				border-left: 1rpx solid #c3c3c3;
			}
		}

		.search {
			margin-left: 120rpx;
		}
	}
	.details-video {
		
		.video {
			video {
				width: 100%;
				height: 450rpx;
			}
		}
		.introduce {
			padding: 20rpx 20rpx 5rpx 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.introduce-js {
				font-size: 28rpx;
				color: #fb7299;
			}
			.frame {
				width: 30rpx;
				height: 4rpx;
				margin-top: 6rpx;
				margin-left: 9rpx;
				background-color: #fb7299;
			}
		}
	}
	.content {
		
		padding: 20rpx;
		.title {
			display: flex;
			justify-content: space-between;
			line-height: 40rpx;
			font-size: 28rpx;
			.hot {
				display: flex;
				.hot-a {
					color: #fb7299;
					width: 120rpx;
					height: 40rpx;
					text-align: center;
					background-color: #f4f4f4;
					border-radius: 20rpx;
				}
			}
			.title-a {
				width: 550rpx;
				margin-left: 10rpx;
			}
		}
		.info {
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
				view {
					margin-left: 10rpx;
				}
			}
			.right {
				width: 270rpx;
				color: #999;
				display: flex;
				justify-content: space-between;
			}
		}
		.collect {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			.active {
				.van-icon {
					color: #fb7299;
				}
			}
			.collect-item {
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				color: #757575;
				view {
					margin-left: 10rpx;
				}
				&:nth-child(3) {
					.van-icon {
						color: #07c160;
					}
				}
			}
		}
	}
	.recommend {
		border-top: 1rpx solid #f5f5f5;
		padding: 20rpx;
		.recommend-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				width: 340rpx;
				.image {
					position: relative;
					.image-list {
						width: 320rpx;
						padding: 0 10rpx;
						position: absolute;
						bottom: 11rpx;
						display: flex;
						justify-content: space-between;
						color: #fff;
						.left {
							display: flex;
							.left-b {
								margin-left: 40rpx;
							}
						}
					}
					image {
						width: 340rpx;
						height: 230rpx;
						border-radius: 10rpx;
					}
				}
				.title {
					height: 80rpx;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
}
</style>
